<template>
<div id="forumdetail">
  <NavBar>
     <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center">话题</div>
    <div slot="right" @click="send_info">分享</div>
  </NavBar>
  <div class="big_box">
<!--         <span class="my-icon" v-else>&#xe612;</span>-->
  <div class="image_header"><van-image round width="50px" height="50px"
  :src="'/api/'+img_header" v-if="img_header"/>
<!--    <span></span>-->
     <span class="my-icon" v-else>&#xe612;</span>

<!--    <van-tag round type="warning" class="tag_name">Lv1</van-tag>-->
    <span class="name" v-if="nickname">{{nickname}}</span>
        <span class="name" v-else>{{username}}</span>

    <span class="louzhu">楼主</span>
  </div>
  <van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
</van-divider>
  <div class="content">
  <div class="title">
    {{title}}
  </div>
    <div class="explain">
      <van-row type="flex" justify="space-between">
  <van-col span="6" class="time">{{create_time|formatDate}}</van-col>
  <van-col span="6"></van-col>
  <van-col span="6" class="report">举报></van-col>
</van-row>
    </div>
<div class="imgcontrol">{{content}}</div>
<!--    <img :src="'http://127.0.0.1:8000/'+this.pic1" class="img" v-show="this.pic1">-->
  <div class="imgbox" >
<!--    <img :src="'http://127.0.0.1:8000/'+this.pic1" class="img" v-show="this.pic1">-->
        <div v-if="this.pic1"><img :src="'/api/'+this.pic1" class="img" v-show="this.pic1"></div>
        <div v-if="this.pic2"> <img :src="'/api/'+this.pic2" class="img" v-show="this.pic2"></div>
        <div v-if="this.pic3"> <img :src="'/api/'+this.pic3" class="img" v-show="this.pic3"></div>
</div>
    </div>

</div>

<div class="divide"></div>
<!--  <div class="allcomment">-->
<!--<img src="../../assets/img/common/Comment(2).png" class="img_comment">-->
<!--    <span>全部回帖（28）</span>-->
<!--  </div>-->

  <van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  评论区({{comment_count}})
</van-divider>
<comments :comment_info="comment_list"></comments>

<!--  评论区-->
  <div class="comment">
<div class="comment_box"><textarea class="huifu" placeholder="快速回帖..." v-model="comment"></textarea></div>
    <van-icon name="comment-circle-o" color="red" class="icon_comment" size="29px"/>
    <div class="send" @click="send_comment">发送</div>
  </div>
  <van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
    @select="onSelect"
/>
</div>
</template>

<script>
import {readadd} from "@/network/Forum/forum";
import Comments from "@/views/comments/Comments";
import {getarticle} from "@/network/Forum/forum";
import {getdetaildata} from "@/network/Users/getgooddetail";
import NavBar from "@/components/common/NavBar/NavBar";
import {post_comments} from "@/network/comment/comments";
import {get_comments} from "@/network/comment/comments";
import {formatDate} from "@/common/common";

export default {
name: "ForumDetail",
  inject:['reload'],
  components: {NavBar,Comments},
  data(){
  return{
    showShare:false,
       options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    content:'',
    iid:'',
    title:'',
    pic1:'',
    pic2:'',
    pic3:'',
    comment:'',
    comment_list:[],
    create_time:'',
    comment_count:0,
    nickname:'',
    img_header:'',
    username:''
  }
  },
  methods:{
   onSelect(option) {
      this.$toast({
        type:"success",
        message:'链接已复制:https://m.ktapp'+this.$route.path+'快去'+option.name+'分享给好友吧~'
      })
      this.showShare = false;
    },
  return_before(){
    history.go(-1)
  },
    send_info(){
    this.showShare=true
    },
    send_comment(){
      console.log(111);
      post_comments(this.comment,'forum',this.iid).then(
          res=>{
            console.log(res);
           if(res.code===0){

             this.reload()
           }
          else {
            this.$notify({
              type:"danger",
              message:'请先去登录后评论哦~'
            })
           }
          }
      )
    }
  },
  created() {
  this.$emit('header',false)
  this.iid=this.$route.params.iid
  readadd(this.iid).then(
      res=>{
        console.log(res);
      }
  )
  getarticle(this.iid).then(
      res=> {
        console.log(res);
        console.log(this.iid)
        this.content = res.info[0].content;
        this.title = res.info[0].title
        this.pic1 = res.info[0].pic1
        this.pic2 = res.info[0].pic2
        this.pic3 = res.info[0].pic3
        this.create_time=res.info[0].create_time
        this.nickname=res.info[0].nickname
        this.img_header=res.info[0].img_header
        this.username=res.info[0].username
      }
  )
    get_comments('forum',this.iid).then(
        res=>{
          console.log(res);
          this.comment_list=res.comment_list
          this.comment_count=res.count
        }
    )
  },
  filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    }

}
</script>

<style scoped>
#forumdetail{
  margin-bottom: 100px;

}
.explain{
  padding-bottom: 20px;
}
.imgbox{
  margin-top: 15px;

}
.img{
  display: block;

  width: 100%;
}
.report{
      color: #1CB194;
  font-size: 14px;
  text-align: right;
}
.time{
    color: #1CB194;
  font-size: 14px;
  width: 120px;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
.icon_comment{
  position: fixed;
  bottom: 3px;
  left: 16px;
}
.imgcontrol {
height: 10px;
}
.image_header{
  padding: 15px 15px 0px 15px;
  position: relative;
}
.tag_name{
  position: absolute;
  left: 41px;
  top: 50px;

}

.name{
  position: absolute;
  left: 83px;
  top: 21px;
  color: black;
}
.divide{
  background-color:  rgb(247,248,250);
  height: 10px;
}
.allcomment{
  height: 30px;
  line-height: 30px;
}
.louzhu{
  margin-left: 18px;
  font-size: 12px;
  color: #a8a8a8;
}
.title{
  font-size: 1.5rem;
  font-weight: bolder;
margin-bottom: .5rem;
line-height: 1.3;
word-break: break-all;
  color: #333;
}
.content{
  padding: 0px 15px;
}
.comment{
  height: 40px;
  position: fixed;
  width: 100%;
  background-color: #EEEEEE;
  bottom: 0;
    opacity: 0.8;
}
.huifu{
width: 75%;
  border: 0;
  border-radius: 5px;
height: 80%;
  resize: none;
  padding: 10px 10px 10px 50px;


}
.comment_box{
  padding: 4px 0px 0px 10px;

}
.big_box{
  background-color: white;
}
.send{
  position: fixed;
  bottom: 8px;
  right: 30px;
  color: #333;
}
.my-icon{
    font-family: "my-icon" !important;
  font-size: 50px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*margin-left: 3px;*/
  color: skyblue;

}
/deep/ .van-notify{
  padding: 10px;
  height: 44px;
}
/deep/ .van-toast{
  width: 300px;
}
</style>